<template>
  <div class="home">
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title animate-item">医疗众包<span class="highlight">项目平台</span></h1>
        <p class="hero-subtitle animate-item">连接研究者与医疗数据贡献者，共同推动医疗研究创新与进步</p>
        <router-link v-if="isAuthenticated" to="/create-project" class="hero-cta animate-item">
          <span>开始您的项目</span>
          <svg width="18" height="18" viewBox="0 0 24 24">
            <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor"/>
          </svg>
        </router-link>
        <a v-else @click="goToCreateProject" class="hero-cta animate-item" style="cursor: pointer;">
          <span>开始您的项目</span>
          <svg width="18" height="18" viewBox="0 0 24 24">
            <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor"/>
          </svg>
        </a>
      </div>
      <div class="hero-visual">
        <div class="visual-element visual-1"></div>
        <div class="visual-element visual-2"></div>
        <div class="visual-element visual-3"></div>
      </div>
    </div>
    
    <div v-if="loading" class="loading-state">
      <div class="loader">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <p>查询项目数据中</p>
    </div>
    
    <div v-else-if="error" class="error-state">
      <div class="error-icon">
        <svg viewBox="0 0 24 24" width="48" height="48">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor"/>
        </svg>
      </div>
      <p class="error-message">{{ error }}</p>
      <button @click="fetchProjects" class="retry-button">重试</button>
    </div>
    
    <div v-else-if="!projects || projects.length === 0" class="empty-state">
      <div class="empty-icon animate-item">
        <svg viewBox="0 0 24 24" width="64" height="64">
          <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor"/>
        </svg>
      </div>
      <h2 class="animate-item">开启您的第一个项目</h2>
      <p class="animate-item">暂无可用项目，点击下方按钮创建您的首个医疗研究项目</p>
      <router-link v-if="isAuthenticated" to="/create-project" class="primary-button animate-item">
        <span>创建新项目</span>
        <svg width="16" height="16" viewBox="0 0 24 24">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
        </svg>
      </router-link>
      <a v-else @click="goToCreateProject" class="primary-button animate-item" style="cursor: pointer;">
        <span>创建新项目</span>
        <svg width="16" height="16" viewBox="0 0 24 24">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
        </svg>
      </a>
    </div>
    
    <div v-else class="projects-section" id="projects-section">
      <div class="section-header">
        <h2 class="section-title animate-on-scroll">探索项目</h2>
        <p class="section-subtitle animate-on-scroll">发现最新的医疗研究项目，找到您感兴趣的领域</p>
        <router-link v-if="isAuthenticated" to="/create-project" class="create-button animate-on-scroll">
          <span>创建新项目</span>
          <svg width="16" height="16" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
          </svg>
        </router-link>
        <a v-else @click="goToCreateProject" class="create-button animate-on-scroll" style="cursor: pointer;">
          <span>创建新项目</span>
          <svg width="16" height="16" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
          </svg>
        </a>
      </div>
      
      <div class="projects-grid">
        <div 
          v-for="(project, index) in validProjects" 
          :key="project.id" 
          class="project-card animate-on-scroll"
          :style="{'--delay': `${index * 0.1}s`}"
          :data-scroll-offset="150 + (index % 3) * 50"
        >
          <div class="card-content">
            <div class="project-header">
              <h3 class="project-title">{{ project.title || '未命名项目' }}</h3>
              <div class="project-status" :class="project.isCompleted ? 'status-completed' : 'status-active'">
                {{ project.isCompleted ? '已完成' : '进行中' }}
              </div>
            </div>
            
            <p class="project-description">{{ truncateText(project.description, 120) || '暂无描述' }}</p>
            
            <div class="project-meta">
              <div class="meta-item">
                <svg viewBox="0 0 24 24" width="18" height="18">
                  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
                </svg>
                <span>{{ project.researcherInfo || '未指定研究者' }}</span>
              </div>
              <div class="meta-item">
                <svg viewBox="0 0 24 24" width="18" height="18">
                  <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" fill="currentColor"/>
                </svg>
                <span>{{ formatDate(project.createdAt) }}</span>
              </div>
            </div>
          </div>
          
          <div class="card-action">
            <router-link :to="'/project/' + project.id" class="view-button">
              <span>查看详情</span>
              <svg width="16" height="16" viewBox="0 0 24 24">
                <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
              </svg>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Home',
  
  computed: {
    ...mapState(['projects', 'loading', 'error']),
    ...mapGetters(['isAuthenticated', 'isResearcher', 'isContributor']),
    
    // 过滤出有效的项目（有id的项目）
    validProjects() {
      return this.projects ? this.projects.filter(p => p && p.id) : [];
    }
  },
  
  created() {
    this.fetchProjects();
  },
  
  mounted() {
    // 添加滚动监听，用于滚动时的动画
    window.addEventListener('scroll', this.handleScroll);
    // 初始执行一次，处理可视区域内的元素
    this.$nextTick(() => {
      this.handleScroll();
    });
  },
  
  beforeDestroy() {
    // 移除滚动监听
    window.removeEventListener('scroll', this.handleScroll);
  },
  
  methods: {
    fetchProjects() {
      // 先尝试使用新的API端点，如果失败就回退到旧方法
      this.$store.dispatch('fetchActiveProjects').catch(error => {
        console.error('fetchActiveProjects失败，回退到fetchProjects:', error);
        this.$store.dispatch('fetchProjects');
      });
    },
    
    retryLoading() {
      this.fetchProjects();
    },
    
    // 添加创建项目跳转逻辑
    goToCreateProject() {
      // 检查用户是否已登录
      if (!this.isAuthenticated) {
        // 未登录，跳转到登录页面，并带上重定向参数
        this.$router.push({ 
          name: 'login',
          query: { redirect: 'create-project' }
        });
      } else {
        // 已登录状态下不应该调用此方法，但以防万一，提供跳转逻辑
        this.$router.push({ name: 'create-project' });
      }
    },
    
    getStatusClass(status) {
      switch(status) {
        case 0:
          return 'status-active';
        case 2:
          return 'status-completed';
        case 3:
          return 'status-deleted';
        default:
          return 'status-unknown';
      }
    },
    
    getStatusText(status) {
      switch(status) {
        case 0:
          return '进行中';
        case 2:
          return '已完成';
        case 3:
          return '已删除';
        default:
          return '未知状态';
      }
    },
    
    truncateText(text, maxLength) {
      if (!text) return '';
      return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
    },
    
    formatDate(timestamp) {
      if (!timestamp) return '尚未设置';
      
      try {
        // 处理不同格式的时间戳
        let date;
        if (typeof timestamp === 'string') {
          // 如果是字符串格式，尝试转为数字
          date = new Date(parseInt(timestamp));
          
          // 检查是否是有效日期
          if (isNaN(date.getTime())) {
            // 尝试直接作为日期字符串解析
            date = new Date(timestamp);
          }
        } else if (timestamp instanceof Date) {
          // 如果已经是Date对象
          date = timestamp;
        } else {
          // 其他情况尝试作为数字
          date = new Date(parseInt(timestamp));
        }
        
        // 检查最终的日期是否有效
        if (isNaN(date.getTime())) {
          return '无效日期';
        }
        
        // 计算日期间隔
        const now = new Date();
        const diffTime = Math.abs(now - date);
        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
        
        // 根据日期间隔提供友好显示
        if (diffDays === 0) {
          return '今天 ' + date.toLocaleTimeString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit'
          });
        } else if (diffDays === 1) {
          return '昨天 ' + date.toLocaleTimeString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit'
          });
        } else if (diffDays < 7) {
          return diffDays + '天前';
        } else {
          return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          }).replace(/\//g, '-');
        }
      } catch (e) {
        console.error('时间格式化错误:', e, timestamp);
        return '格式错误';
      }
    },
    
    // 改进滚动监听处理，增加性能优化
    handleScroll() {
      // 使用requestAnimationFrame优化性能
      window.requestAnimationFrame(() => {
        // 获取所有带有animate-on-scroll类的元素
        const elements = document.querySelectorAll('.animate-on-scroll');
        
        elements.forEach(element => {
          // 获取元素位置信息
          const rect = element.getBoundingClientRect();
          const offset = element.dataset.scrollOffset ? parseInt(element.dataset.scrollOffset) : 150;
          
          // 判断元素是否进入可视区域
          if (rect.top <= window.innerHeight - offset) {
            element.classList.add('visible');
            
            // 如果是项目卡片，处理子元素动画
            if (element.classList.contains('project-card') && !element.classList.contains('animate-children')) {
              element.classList.add('animate-children');
              
              // 获取卡片内的元素并给它们添加动画类
              const children = [
                element.querySelector('.project-title'),
                element.querySelector('.project-status'),
                element.querySelector('.project-description'),
                element.querySelector('.project-meta'),
                element.querySelector('.card-action')
              ];
              
              children.forEach((child, index) => {
                if (child) {
                  setTimeout(() => {
                    child.classList.add('fade-in');
                  }, index * 100);
                }
              });
            }
          }
        });
      });
    }
  }
}
</script>

<style scoped>
:root {
  --color-primary: #0055A4;
  --color-primary-light: #2D7CC5;
  --color-primary-dark: #003B72;
  --color-accent: #4CAF50;
  --color-accent-light: #6ABF6E;
  --color-accent-dark: #3B9F3E;
  --color-success: #2AB280;
  --color-warning: #F2BD59;
  --color-error: #E63946;
  --color-dark: #243252;
  --color-light: #fff;
  --color-gray-50: #F4F9FF;
  --color-gray-100: #E6F1FF;
  --color-gray-200: #D1E3F8;
  --color-gray-300: #D1D5E1;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  
  --color-medical-blue: #0055A4;
  --color-trust-green: #4CAF50;
  --color-medical-red: #E63946;
  --color-medical-light-blue: #E1F5FE;
  
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  
  --font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 3px rgba(68, 109, 246, 0.3);
}

/* 基础样式 */
.home {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-family);
  color: var(--color-dark);
  overflow-x: hidden;
  background-color: var(--color-medical-light-blue);
}

/* 英雄区样式 */
.hero-section {
  position: relative;
  height: 95vh;
  min-height: 700px;
  max-height: 1000px;
  display: flex;
  align-items: center;
  padding: 0 5vw;
  overflow: hidden;
  background: linear-gradient(135deg, #D6EAF8 0%, #0055A4 200%);
  border-bottom: 2px solid rgba(0, 85, 164, 0.4);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 60%;
  padding-right: 2rem;
}

/* 添加医疗主题图标背景元素 */
.hero-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(0, 85, 164, 0.05)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M12 8v8M8 12h8"/></svg>');
  background-repeat: space;
  background-size: 80px 80px;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

/* 渐入动画元素 */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s forwards;
}

.hero-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.1;
  font-weight: 900;
  margin-bottom: 1.8rem;
  letter-spacing: -0.03em;
  color: #003B72;
  animation-delay: 0.1s;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.hero-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: #fff;
  margin-bottom: 3rem;
  max-width: 700px;
  animation-delay: 0.3s;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-weight: 500;
}

.hero-cta, .create-button, .primary-button {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--color-medical-blue);
  color: #333333;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  transition: all 0.3s ease;
  gap: 0.75rem;
  box-shadow: 0 6px 12px rgba(0, 85, 164, 0.25);
  border: 2px solid var(--color-medical-blue);
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  text-shadow: none;
}

.hero-cta {
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(0, 85, 164, 0.35);
}

.hero-cta svg {
  color: rgba(0, 85, 164, 0.35);
}

.hero-cta::after, .create-button::after, .primary-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-cta:hover, .create-button:hover, .primary-button:hover {
  transform: translateY(-3px);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 8px 16px rgba(0, 85, 164, 0.35);
}

.hero-cta:hover::after, .create-button:hover::after, .primary-button:hover::after {
  opacity: 1;
}

.hero-cta svg, .create-button svg, .primary-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  filter: none;
  color: #333333;
}

/* 特别为创建按钮增加一些额外的突出效果 */
.create-button {
  background: var(--color-trust-green);
  border-color: var(--color-trust-green);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.25);
}

.create-button:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: 0 8px 16px rgba(76, 175, 80, 0.35);
}

/* 确保按钮文字和图标在所有状态下都清晰可见 */
.hero-cta span, .create-button span, .primary-button span {
  position: relative;
  z-index: 2;
  color: #333333;
  text-shadow: none;
}

.highlight {
  background: linear-gradient(45deg, #0055A4 30%, #1e76c9 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  padding: 0 0.2em;
}

.hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.visual-element {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  animation: float 12s infinite alternate ease-in-out;
}

.visual-1 {
  width: 350px;
  height: 350px;
  top: 20%;
  right: 15%;
  background: linear-gradient(135deg, rgba(0, 85, 164, 0.9), rgba(45, 124, 197, 0.8));
  animation-delay: 0s;
}

.visual-2 {
  width: 250px;
  height: 250px;
  top: 55%;
  right: 30%;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.7), rgba(45, 124, 197, 0.5));
  animation-delay: -4s;
}

.visual-3 {
  width: 200px;
  height: 200px;
  top: 30%;
  right: 40%;
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.5), rgba(45, 124, 197, 0.4));
  animation-delay: -8s;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20px, 20px) scale(1.05);
  }
  100% {
    transform: translate(20px, -20px) scale(0.95);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动触发动画元素 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--delay, 0s);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 状态样式 */
.loading-state, .error-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  min-height: 40vh;
  text-align: center;
  max-width: 500px;
  margin: 2rem auto;
  background-color: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.empty-state {
  border-top: 5px solid var(--color-medical-blue);
  background-color: var(--color-light);
  box-shadow: 0 6px 16px rgba(0, 85, 164, 0.1);
}

.empty-state .animate-item:nth-child(1) {
  animation-delay: 0.1s;
}

.empty-state .animate-item:nth-child(2) {
  animation-delay: 0.3s;
}

.empty-state .animate-item:nth-child(3) {
  animation-delay: 0.5s;
}

.empty-state .animate-item:nth-child(4) {
  animation-delay: 0.7s;
}

.error-state {
  border-top: 5px solid var(--color-medical-red);
  background-color: var(--color-light);
  box-shadow: 0 6px 16px rgba(230, 57, 70, 0.1);
}

.loader {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.loader span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-medical-blue);
  animation: pulse 1.5s infinite ease-in-out;
}

.loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.error-icon, .empty-icon {
  margin-bottom: 1.5rem;
  color: var(--color-error);
}

.empty-icon {
  color: var(--color-medical-blue);
}

.retry-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  background: var(--color-error);
  color: #333333;
  border: 2px solid var(--color-error);
  border-radius: var(--border-radius-md);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(239, 71, 111, 0.25);
  letter-spacing: 0.02em;
  text-shadow: none;
}

.retry-button:hover {
  transform: translateY(-2px);
  background: #d93963;
  border-color: #d93963;
  box-shadow: 0 6px 12px rgba(239, 71, 111, 0.35);
}

/* 项目区域样式 */
.projects-section {
  padding: 5rem 5vw;
  background: linear-gradient(180deg, var(--color-medical-light-blue) 0%, white 100%);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-medical-blue), var(--color-primary-light));
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-gray-600);
  max-width: 600px;
  margin: 1.5rem auto 2rem;
}

.create-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
  color: white;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(68, 109, 246, 0.2);
}

.create-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(68, 109, 246, 0.3);
}

.create-button svg {
  transition: transform var(--transition-fast);
}

.create-button:hover svg {
  transform: rotate(90deg);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
}

.project-card {
  background-color: white;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 85, 164, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 85, 164, 0.15);
  position: relative;
}

.project-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to bottom, rgba(0, 85, 164, 0.05), transparent);
  transition: height 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.project-card:hover:before {
  height: 100%;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 85, 164, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 85, 164, 0.3);
}

.project-card:hover .project-title {
  color: var(--color-medical-blue);
}

.project-card:hover .view-button {
  border-color: var(--color-medical-blue);
  color: var(--color-medical-blue);
}

.view-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  max-width: 80%;
  padding: 0.75rem 1.25rem;
  margin: 0 auto;
  background-color: white;
  color: var(--color-medical-blue);
  border: 2px solid var(--color-medical-blue);
  border-radius: var(--border-radius-md);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 85, 164, 0.05);
}

.view-button:hover {
  background-color: var(--color-medical-blue);
  color: white;
  border-color: var(--color-medical-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 85, 164, 0.15);
}

.view-button:hover span {
  color: white;
}

.view-button svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.view-button:hover svg {
  transform: translateX(3px);
  color: white;
}

.card-content {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.project-title {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
  color: var(--color-dark);
  padding-right: 1rem;
}

.project-status {
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-active {
  background-color: rgba(0, 85, 164, 0.1);
  color: var(--color-medical-blue);
  border: 1px solid rgba(0, 85, 164, 0.2);
}

.status-completed {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--color-trust-green);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.project-description {
  margin: 0 0 1.5rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  flex-grow: 1;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.meta-item svg {
  color: var(--color-medical-blue);
  flex-shrink: 0;
}

.card-action {
  padding: 1.25rem;
  background-color: #F0F8FF;
  border-top: 1px solid var(--color-gray-200);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-section {
    height: auto;
    padding: 8rem 5vw;
    flex-direction: column;
  }
  
  .hero-section::before {
    opacity: 0.1;
  }
  
  .hero-content {
    width: 100%;
    padding-right: 0;
    text-align: center;
  }
  
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    color: #fff;
  }
  
  .hero-visual {
    position: relative;
    width: 100%;
    height: 350px;
    margin-top: 2.5rem;
  }
  
  .visual-element {
    transform: scale(0.9);
  }
  
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  /* 添加移动版折叠/展开功能 */
  .section-header {
    position: relative;
    padding-bottom: 1rem;
  }
  
  .section-title::after {
    transition: width 0.3s ease;
  }
}

@media (max-width: 768px) {
  .projects-section {
    padding: 3rem 1rem;
  }
  
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  /* 优化移动端交互体验 */
  .hero-cta, .create-button, .primary-button {
    width: 100%;
    justify-content: center;
    padding: 1.1rem 1.5rem;
    font-size: 1.15rem;
  }
  
  .card-action {
    position: sticky;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    z-index: 2;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .project-card {
    border-radius: var(--border-radius-md);
  }
  
  .card-content {
    padding: 1.25rem;
  }
  
  .project-title {
    font-size: 1.25rem;
  }
  
  /* 简化移动端动画，提高性能 */
  .visual-element {
    display: none;
  }
  
  /* 确保移动端有良好的触控体验 */
  .view-button, .hero-cta, .create-button, .retry-button, .primary-button {
    padding: 0.85rem 1.5rem;
  }
}

/* 情感化设计增强 */
.empty-state {
  position: relative;
  overflow: hidden;
}

.empty-state::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(42, 92, 138, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0;
}

.empty-icon, .empty-state h2, .empty-state p, .empty-state .primary-button {
  position: relative;
  z-index: 1;
}

.empty-icon {
  animation: pulse 3s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 增强信息层次感 */
.project-title {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
  color: var(--color-dark);
  padding-right: 1rem;
  transition: color 0.3s ease;
}

.project-description {
  margin: 0 0 1.5rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  flex-grow: 1;
  transition: color 0.3s ease;
}

.project-card:hover .project-description {
  color: var(--color-gray-700);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease;
}

.section-header:hover .section-title {
  transform: translateY(-2px);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-medical-blue), var(--color-primary-light));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.section-header:hover .section-title::after {
  width: 120px;
}

/* 改进骨架屏动画效果 */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.loading-state {
  background-color: var(--color-light);
  box-shadow: 0 6px 16px rgba(0, 85, 164, 0.1);
  overflow: hidden;
  position: relative;
}

.loading-state::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%);
  animation: shimmer 2s infinite;
  z-index: 1;
}

/* 修改探索项目部分的创建按钮 */
.section-header .create-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  background: var(--color-trust-green);
  border: 2px solid var(--color-trust-green);
  color: #333333;
  border-radius: var(--border-radius-md);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.25);
}

.section-header .create-button:hover {
  transform: translateY(-3px);
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: 0 8px 16px rgba(76, 175, 80, 0.35);
}

.section-header .create-button svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  color: #333333;
}

.section-header .create-button:hover svg {
  transform: rotate(90deg);
  color: #333333;
}
</style> 